<template>
  <div class="fight-list">
    <!-- 搜索的背景色是白色 -->
    <div class="bgw">
      <!-- 搜索 -->
      <form class="form-inline">
        <div class="form-group mr36">
          <w-label :must="false">商品名称</w-label>
          <w-input class="input-inline" :validate="false" v-model="params.goodsName"></w-input>
        </div>
        <div class="form-group">
          <w-label :must="false">商品货号</w-label>
          <w-input class="input-inline" :validate="false" v-model="params.goodsSerial"></w-input>
        </div>
        <div class="form-group">
          <w-label :must="false">拼单编号</w-label>
          <w-input class="input-inline" :validate="false" v-model="params.goodsRuleId"></w-input>
        </div>
        <w-button type="main" @on-click="searchByParam">搜索</w-button>
      </form>
      <!-- 搜索按钮 -->
      <w-button-group>
        <w-button type="default" v-for="(btn, index) in btns" :key="index" :class="{main: btnIndex === index}" @on-click="onSelectOrder(btn, index)">{{btn.name}}</w-button>
      </w-button-group>
    </div>
    <!-- 内容列表 -->
    <div class="store-goods-list">
      <w-table :columns="columns">
        <!-- 拼单列表 -->
        <tr v-for="(goods, index) in goodsRulesList" v-bind:key="index">
          <!-- 拼单编号 -->
          <td>
            {{goods.goodsRuleId}}
          </td>
          <!-- 商品基本信息 -->
          <td class="goods">
            <img :src="goods.goodsMainPhotoPath" @click="goGoodsDetail(goods.goodsId)">
            <p @click="goGoodsDetail(goods.goodsId)">{{goods.goodsName}}</p>
          </td>
          <!-- 商品货号 -->
          <td>{{goods.goodsSerial}}</td>
          <!-- 拼单结束时间 -->
          <td>
            {{goods.gameOver}}
            <!-- {{new Date(goods.fightGoodsEndTime).getFullYear()}}-{{new Date(goods.fightGoodsEndTime).getMonth() + 1}}-{{new Date(goods.fightGoodsEndTime).getDate()}} -->
          </td>
          <!-- 拼单状态 -->
          <td>
            <span v-if="goods.ruleStatus == 0">待审核</span>
            <span v-if="goods.ruleStatus == -1">未通过</span>
            <span v-if="goods.ruleStatus == 4">拼单中</span>
            <span v-if="goods.ruleStatus == 5">已结束</span>
          </td>
          <!-- 拼单失败原因 -->
          <td class="reason">{{goods.unPassReason}}</td>
          <!-- 操作 -->
          <td class="operate">
            <button type="button" v-if="goods.ruleStatus == -1" @click="onSetFight(goods, false)">修改</button>
            <button type="button" :class="{'disabled': isOverTimeAfterNow(goods.fightGoodsEndTime)}" v-if="goods.ruleStatus == 5" @click="onSetFight(goods, isOverTimeAfterNow(goods.fightGoodsEndTime))">再次发起</button>
            <button type="button" v-if="goods.ruleStatus == 0 || goods.ruleStatus == -1 || goods.ruleStatus == 4 || goods.ruleStatus == 5" @click="onLinkDetail(goods.goodsRuleId)">查看详情</button>            
          </td>
        </tr>
        <!-- 如果没有数据，则加载此提示消息 -->
        <tr v-if="goodsRulesList.length == 0">
          <td colspan="7">暂时没有数据哟！</td>
        </tr>
      </w-table>
    </div>

    <!-- 设置拼单模态框 -->
    <w-panel-fixed-wrap title="设置拼单规则" confirmText="提交审核" v-model="showModule" @on-confirm="submitUpdatedGoodsSkuInfoHandler"  @on-cancel="resetSkuParams" class="fight-panel">
      <!-- <i class="close-btn">&times;</i> -->
      <div class="fightSet">
        <div class="fightRow">
          <div class="title">拼单结束时间：</div>
          <div class="date">
            <w-datepicker v-model="goodsParams.fightGoodsEndTime" :split="true"></w-datepicker>
          </div>
        </div>
        <div class="fightRow">
          <div class="title">商品类型：</div>
          <div class="radioGroup clearfix">
            <div class="radio fl">
              <w-radio label="0" name="supplyMode" v-model="goodsParams.goodsNumType">期货</w-radio>
            </div>
            <div class="radio">
              <w-radio label="1" name="supplyMode" v-model="goodsParams.goodsNumType">现货</w-radio>
            </div>
          </div>
        </div>
        <div class="fightRow">拼单参数配置</div>
        <div class="fightRow">
          <div class="SKU">
            <table class="table">
              <thead>
                <th>颜色</th><th>颜色最低发货量</th><th>尺码</th><th>采购商最低起订量</th><th v-if="goodsParams.goodsNumType == '1'">商品数量</th>
              </thead>
              <!-- SKU组合 -->
              <sku-group v-for="(item, index) in goodsParams.goodsRulesDetailList" :goods-type="goodsParams.goodsNumType" :count="true" :index="index" :key="index" :specs="item"></sku-group>
            </table>
          </div>
        </div>
        <div class="fightRow">
          <div class="title">拼单发货总量：</div>
          <div class="date">
            <w-input rule="isEmpty|onlyInt"  error="必填|格式错误" v-model="goodsParams.crowdfundingCount"></w-input>
            件
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 分页 -->
    <w-paging v-show="pageTotal > 1" :current="params.currentPage" :total="pageTotal" @page="jumptToPage"></w-paging>
  </div>
</template>

<script>
  import skuGroup from './common/SkuGroup.vue'
  import { FONT_GOODS_DETAIL_URL } from 'js/config'
  import { apiFight } from 'js/api'
  import { mapGetters } from 'vuex'

  export default {
    components: {
      skuGroup
    },
    computed: {
      ...mapGetters(['storeId', 'token'])
    },
    data() {
      return {
        goodsRulesList: [], // 拼单列表数据
        pageTotal: 1, // 总页数
        btnIndex: 0,
        // 搜索条件按钮
        btns: [
          {name: '全部', id: 1, value: undefined},
          {name: '待审核', id: 2, value: 0},
          {name: '未通过', id: 3, value: -1},
          {name: '拼单中', id: 4, value: 4},
          {name: '已结束', id: 5, value: 5}
        ],
        // 拼单列表
        columns: [
          {title: '拼单编号'},
          {title: '名称', width: '20%'},
          {title: '商品编号'},
          {title: '拼单结束时间'},
          {title: '状态'},
          {title: '原因'},
          {title: '操作'}
        ],
        showModule: false, // 设置拼单模态框
        params: {
          storeId: '',
          goodsName: '',
          goodsSerial: '',
          goodsRuleId: '',
          ruleStatus: '',
          currentPage: 1,
          showCount: 5
        },
        // 设置拼单规则入参
        goodsParams: {},
        // 修改拼单规则
        editParams: {
          accessToken: this.$store.getters.token,
          goodsRuleId: '',
          crowdfundingCount: '',
          fightGoodsEndTime: '',
          goodsNumType: '',
          goodsDetailList: []
        },
        status: '',
        goodsRuleId: ''
      }
    },
    created() {
      this.getGoodsCrowdFundRulesList()
    },
    methods: {
      /**
       * 重置参数
       */
      resetSkuParams() {
        this.goodsParams = {
          accessToken: this.token,
          goodsId: '',
          crowdfundingCount: '',
          fightGoodsEndTime: '',
          goodsNumType: 0,
          goodsRulesDetailList: []
        }
      },

      isOverTimeAfterNow(time) {
        if (new Date().getTime() < time) {
          return true
        }
        return false
      },
      /**
       * 获取拼单列表数据
       */
      getGoodsCrowdFundRulesList() {
        this.params.storeId = this.storeId
        apiFight.getGoodsCrowdFundRules(this.params).then(data => {
          this.goodsRulesList = data.goodsRulesList || []
          this.pageTotal = data.pageTotal
        })
      },
      /**
       * 通过参数搜索
       */
      searchByParam() {
        // 设置当前页为第一页
        this.params.currentPage = 1

        // 不展示分页
        this.showPage = false

        // 加载数据
        this.getGoodsCrowdFundRulesList()
      },
      /**
       * 筛选按钮点击
       *
       * @param  { Object } ruleStatus
       * @param  { Number } index 当前索引
       */
      onSelectOrder(ruleStatus, index) {
        // 界面展示点击的订单状态按钮
        this.btnIndex = index

        // 将当前订单状态设置为选中的状态
        this.params.ruleStatus = ruleStatus.value

        // 从新访问第一页数据
        this.params.currentPage = 1

        // 请求接口数据
        this.getGoodsCrowdFundRulesList()
      },
      /**
       * 设置拼单
       *
       * @param { Object } goods 商品
       */
      onSetFight(goods, isOverTime) {
        if (!isOverTime) {
          // 显示弹框
          this.showModule = true
          // 将参数赋值给弹框对象
          this.goodsParams = goods
          // 设置拼单结束时间
          this.goodsParams.fightGoodsEndTime = this.goodsParams.gameOver
          // 设置token
          this.$set(this.goodsParams, 'accessToken', this.token)
          // 设置sku参数
          this.$set(this.goodsParams, 'goodsRulesDetailList', JSON.parse(this.goodsParams.goodsGsp))
          console.log(this.goodsParams)
        } else {
          this.$toast('时间未结束，不可再次发起拼单')
        }
      },
      /**
       * 更新已经修改后的商品sku信息
       */
      submitUpdatedGoodsSkuInfoHandler() {
        if (!this.goodsParams.fightGoodsEndTime) {
          this.$toast('请选择拼单结束时间')
          return
        } else {
          let date = new Date()
          let newDate = new Date(this.goodsParams.fightGoodsEndTime)
          if (date - newDate >= 0) {
            $toast('拼单时间结束时间必须大于当前时间')
            return
          }
        }
        if (this.goodsParams.goodsNumType != 0 && this.goodsParams.goodsNumType != 1) {
          this.$toast('请选择商品类型')
          return
        }
        if (!this.goodsParams.goodsRulesDetailList) {
          this.$toast('请输入数据')
          return
        }
        if (!this.goodsParams.crowdfundingCount) {
          this.$toast('请输入发货量')
          return
        }
        // 默认加载新增规则接口
        let apiName = 'installCrowdFundRule'
        // 如果是修改，则调用编辑接口
        if (this.goodsParams.ruleStatus == -1) {
          apiName = 'editCrowdFundRule'
        }

        apiFight[apiName](this.goodsParams).then(data => {
          this.$toast('设置拼单成功', () => {
            this.resetSkuParams()
            this.showModule = false
          })
        })
      },
      // 打开新窗口查看商品详情
      goGoodsDetail(goodsId) {
        window.open(`${FONT_GOODS_DETAIL_URL}` + goodsId)
      },
      /**
       * 跳转拼单详情
       */
      onLinkDetail(goodsRuleId) {
        this.$router.push(`../fightAlone/fightDetail/${goodsRuleId}`)
      },
      /**
       * 跳转到制定页面
       *
       * @parma {Integer} page 当前页
       */
      jumptToPage(page) {
        // 记录当前页
        this.params.currentPage = page

        // 请求数据
        this.getGoodsCrowdFundRulesList()
      }
    }
  }
</script>

<style lang="scss">
  .fight-list {
    .m-panel-wrap {
      width: 536px!important;
      height: 500px!important;
      max-height: 584px!important;
    }
    .panel-title {
      h3 {
        text-align: center;
        float: none;
      }
    }
    .g-panel-fixed .m-panel-wrap {
      top: 50%!important;
      left: 50%!important;
    }
    .fight-panel {
      .btn.default {
        display: none
      }
    }
  }
</style>
<style lang="scss" scoped>
  .fight-list {
    .disabled {
      color: #cccccc
    }
    .close-btn {
      position: absolute;
      top: 0;
      right: 20px;
      font-size: 22px;
    }
    .bgw {
      background-color: white;
      padding: 20px 30px;
      // margin: -20px -30px 0px -30px;
      position: relative;
      z-index: 10;
    }

    .goods {
      cursor: pointer;
      p {
        margin: 0px;
        padding: 15px;
      }
    }

    .checked-width {
      width: 80px;
    }

    .all {
      margin-left:  18px;
    }

    .form-inline {
      margin: 20px 0;
    }

    .mal {
      margin-left: 18px;
      width: 72px;
    }

    .mald {
      margin-left: 38px;
      width: 72px;
    }

    .mr36 {
      margin-right: 36px;
    }

    .pdl30 {
      padding-left: 30px;
    }

    .input-inline {
      display: inline-block;
      margin-left: 14px;
      width: 194px;
    }

    .reason {
      color: #ff7e00;
      max-width: 100px;
      overflow: auto;
      white-space: normal;
    }
  }
  // 拼单模态框
  .fightRow {
      margin-bottom: 20px;
    .title {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .date {
      display: inline-block;
      width: 352px;
    }
    .radioGroup {
      width: 250px;
      display: inline-block;
      .radio {
        margin-right: 50px;
      }
    }
  }
</style>